<template>
    <div>
        <div style="margin: 20px 0">
            <el-select class="input" v-model="timeRange" placeholder="请选择" @change="load">  <!--  从后台加载最新的数据 -->
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card style="">
                    <div id="line" style="width: 100%; height: 400px"></div>
                </el-card>
            </el-col>
            <el-col :span="11" >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card style="height: 180px;text-align: center">
                            <h4>最近一个月的订单数</h4>
                            <div style="font-size: 32px">{{ data.nofMonths }}</div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card style="height: 180px;text-align: center">
                            <h4>历史完成订单数量</h4>
                            <div style="font-size: 32px">{{ data.history }}</div>

                        </el-card>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px" :gutter="20">
                    <el-col :span="12">
                        <el-card style="height: 180px;text-align: center">
                            <h4>本周明星菜</h4>
                            <div style="font-size: 32px">{{ data.mingxing }}</div>

                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card style="height: 180px;text-align: center">
                            <h4>净利润</h4>
                            <div style="font-size: 32px">￥{{ data.jing }}</div>

                        </el-card>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px" :gutter="20">
                    <el-col :span="12">
                        <el-card style="height: 180px;text-align: center">
                            <h4>毛利润</h4>
                            <div style="font-size: 32px">￥{{ data.mao }}</div>

                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import request from "@/request";
    import * as echarts from 'echarts'

    const option = {
        title: {
            text: '餐厅流水统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['营业金额']

        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []  // 从后台动态获取
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '营业金额',
                type: 'line',
                stack: 'Total',
                smooth: true,
                data: []     // 从后台动态获取
            },

        ]
    }

    export default {
        data() {
            return {
                data:{},
                lineBox: null,
                timeRange: 'week',
                options: [
                    {label: '最近一周', value: 'week'},
                    {label: '最近一个月', value: 'month'},
                    {label: '最近两个月', value: 'month2'},
                    {label: '最近三个月', value: 'month3'},
                ]
            }
        },
        mounted() {  // 等页面元素全部初始化好
            this.load()
            this.getData()
        },
        methods: {
            load() {
                if (!this.lineBox) {
                    this.lineBox = echarts.init(document.getElementById('line'))  // 初始化echarts容器
                }
                // 从后台获取数据
                request.get('/statistics/' + this.timeRange).then(res => {
                    option.xAxis.data = res.data.date
                    option.series[0].data = res.data.money
                    this.lineBox.setOption(option)  // 设置容器的属性值，当你的数据发生变化的时候，一定要重新setOption
                })
            },
            getData(){
                request.get('/statistics/getData').then(res => {
                    console.log(res.data);
                    this.data = res.data
                })
            }
        }
    }

</script>

<style scoped>
    .input {
        width: 300px;
    }
</style>